<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html >
	<head>
		<meta charset="UTF-8">
		<title>Helicopter Transportation Website Template</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/navtab.js"></script>
		<!-- <script src="js/test.js"></script> -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
		<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> -->
	
	</head>
	<body>
		<div id="page">
			<div id="header">
				<div class="background">
					<div id="navigation">
						<ul id="nav-mainbox">
							<li>
								<a href="index.html">Home</a>
							</li>							
						</ul>
					</div>
				</div>
			</div>
			<div id = "contents">
			<div id = "body">
			<!-- <div id = "content"> -->
				<div id=tabs>
				<template>
                    
                    <el-card :body-style="{ padding: '0px' }">   
                        <img v-bind:src="member.Photo" class="image" >								    
                            <div class="text item">
                              姓名:{{ member.Name }}<br>
                              身份:{{member.Identity}}<br>
                              职称:{{member.Title}}<br>
                              研究方向:{{member.Yjfx}}<br>
                            </div>								  								
                      </el-card>
                      <div>					
					<el-tabs :tab-position="tabPosition" class="tabs" type="border-card">
					  <!-- <el-tab-pane label="个人简介" >
                          <div id="introduce"></div>                        
					  </el-tab-pane>
					  <el-tab-pane label="科研项目">
						<div id="kyxm"></div>                       
					  </el-tab-pane>
					  <el-tab-pane label="科研成果">
						<div id="kycg"></div>                        
					  </el-tab-pane>
					  <el-tab-pane label="荣誉奖励">
						<div id="achievement"></div>
                          
					  </el-tab-pane> -->
					  <el-tab-pane v-for="item in tabs"
                       
                       :label="item.name"
                                             
					   >
					   <p v-html="item.content"></p>
						<!-- <component :is="item.content"></component> -->
					</el-tab-pane>
					</el-tabs>
                </div>
				  </template>
				</div>
				  <script>
					  new Vue({
					  el:'#tabs',
					  data() {
						return {
						  tabPosition: 'left',						  
						  member:"",  
						  tabs:[],
						  currentPage:1,
						                     
						};
					  },
					  methods: {
                        getmember(){
                            var searchURL = window.location.search;  
                            searchURL = searchURL.substring(1, searchURL.length);  
                            var targetPageId = searchURL.split("&")[0].split("=")[1];
                            console.log(targetPageId)
                            axios.post('http://localhost:5000/api/member/getmemberbyid',{id:targetPageId} 
						).then(res=>{console.log(res.data), this.member=res.data
							console.log(this.member.Title);
							if(this.member.Introduce!=="请输入..."){
								var tab=[]
								tab.name="个人简介",
								tab.content=this.member.Introduce
								this.tabs.push(tab)
							};
							if(this.member.Kycg!=="请输入..."){
								var tab=[]
								tab.name="科研成果",
								tab.content=this.member.Kycg
								this.tabs.push(tab)
							};
							if(this.member.Kyxm!=="请输入..."){
								var tab=[]
								tab.name="科研项目",
								tab.content=this.member.Kyxm
								this.tabs.push(tab)
							};
							if(this.member.Achievement!=="请输入..."){
								var tab=[]
								tab.name="荣誉奖励",
								tab.content=this.member.Achievement
								this.tabs.push(tab)
							};
							// this.firstTab()
							console.log(this.tabs) 
						}).catch(err=>{console.log(err)})
                          },
					    handleClick(tab, event) {
                            
                         
                            console.log(tab, event);
						},
						firstTab(){
							// for(var i=0;i<4;i++){
							// 	$("#el-tabs__content").append("<p>" + this.member.Introduce + "</p>");
							// }
							
                            // $("#cc").append("<p>" + this.member.Introduce + "</p>");
                            // $("#kyxm").append("<p>" + this.member.Kyxm + "</p>");
                            // $("#kycg").append("<p>" + this.member.Kycg + "</p>");
                            // $("#achievement").append("<p>" + this.member.Achievement + "</p>");
                          														
						},
						
						},
						mounted () {
                        
                        this.getmember()
                        //this.firstTab()
								}
					})
				  </script>
				<div id = "section2">
				</div>		
			</div>
			</div>
			
		</div>
		
	</body>
</html>
<style> 
	.image {
	  width: 148px;
	  height: 190px;
	  float: left;
	  margin:10px;
	}
  
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	.text {
	font-size: 20px;
	margin:10px;
	float: left;
	width: 80%;
    }
	.page{
    /* float: center; */
    text-align:center;
    margin:0 auto;
    }
  #introduce,#kycg,#kyxm,#achievement{
      margin-left: 20px;
  }
  .el-tabs__nav-next,.el-tabs__nav-prev{
	visibility:hidden;
	display:none;
  }

  </style>